<template>
  <div class="page">
    <div class="logo">
      <img src="../assets/images/ico_bg.png" alt="">
      <p>MImi</p>
    </div>
    <div class="login-content">
      <div class="item">
        <img src="../assets/images/ico_user.png" alt="">
        <input type="text" placeholder="请输入账号" maxlength="12" v-model="ccount">
      </div>
      <div class="item">
        <img src="../assets/images/ico_pwd.png" alt="">
        <input type="password" placeholder="请输入密码" maxlength="21" v-model="pwd">
      </div>
      <button @click="log">登录</button>
      <p>还没有账号？<a href="javascript:;" class="theme-color" @click="$router.togo('/register')">马上注册</a></p>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  data () {
    return {
      ccount: '',
      pwd: ''
    }
  },
  computed: {

  },
  methods: {
		...mapMutations(['login']),
    log(){
      if(!this.ccount){
        this.$toast('账号不能为空！');
      } else if (!this.pwd) {
        this.$toast('密码不能为空！');
      } else {
				this.$loading.show();
				this.$http.login({
					ccount: this.ccount,
					pass: this.pwd
				}).then((res) => {
					this.$loading.hide();
					console.log(res);
					if(res.code === 0){
						this.$toast('登录成功');
						this.login(res.data);
						setTimeout(() => {
							this.$router.togo('/home');
						}, 1000);
					} else {
						this.$toast('账号或者密码错误！');
						this.pwd = ''
					}
				})
      }
    }
  },
  mounted () {

  }
}
</script>

<style scoped lang="scss">
@import 'styles/common.scss';
.page{
  background: #fff;
  min-height: 100vh;
}
.logo{
  position: relative;
  img{
    width: 100%;
  }
  p{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: $base-color;
    font-size: rem(100);
    font-weight: bold;
  }
}
.login-content{
  margin: rem(80) rem(60) 0 rem(60);
  .item{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: rem(20);
    border-bottom: 1px solid #ddd;
    img{
      width: rem(38);
    }
    input{
      padding: rem(20) rem(40);
      width: 100%;
      color: #484848;
    }
  }
  button{
    margin-bottom: rem(40);
  }
}
</style>
